<template>
    <div style="float:left;margin-bottom: 10px;">
    </div>
    <el-card style="width: 100%;">
        <div style="margin-top: 20px;text-align: center;">
            <h2>生产派工</h2>
        </div>
        <div style="margin-top: 30px">
            <table border="1" style="width: 100%;height: 100%; border-collapse: collapse;text-align: right;">
                <tr style="height: 35px;">
                    <td style="text-align: left;" colspan="6">基本信息</td>
                </tr>
                <tr>
                    <td style="width: 100px;"> 单据主题:</td>
                    <td>
                        <el-input v-model="form.disTopic" style=" width: 100%" />
                    </td>
                    <td>单据编号:</td>
                    <td>
                        <el-input v-model="form.dNumber" style="width: 100%" placeholder="保存后自动生成" disabled />
                    </td>
                    <td>被派工人员:</td>
                    <td>
                        <el-input v-model="form.manpowerName" style="width: 100%" @dblclick="openDialog"
                            placeholder="双击选择被派工人员" />
                    </td>
                    <td>制单人员:</td>
                    <td>
                        <el-input v-model="form.addName" style="width: 100%" disabled />
                    </td>
                </tr>
                <tr>
                    <td>派工产品:</td>
                    <td>
                        <el-input v-model="form.dispatchProd" style="width: 100%"
                            @dblclick="dialogProductTypeSelect = true" placeholder="双击选择派工产品" />
                    </td>
                    <td>物料清单:</td>
                    <td>
                        <el-input v-model="form.mSubject" style="width: 100%"
                            @dblclick="dialogProductTypeSelect1 = true" placeholder="双击选择物料清单">
                        </el-input>
                    </td>
                    <td>本次派工数量:</td>
                    <td>
                        <el-input v-model="form.dThisNum" style="width: 100%">
                        </el-input>
                    </td>
                    <td>制单时间:</td>
                    <td>
                        <el-input v-model="form.addTime" style="width: 100%" disabled />
                    </td>
                </tr>

                <tr>

                    <td>已派工数量:</td>
                    <td>
                        <el-input v-model="form.dAlreadyNum" style="width: 100%" />
                    </td>
                </tr>
            </table>
        </div>

        <!-- 派工产品 -->
        <div style="margin-top: 30px;width: 100%;">
            <span>派工产品
                <el-button size="small" @click="AddRowProduct">增行</el-button>
            </span>
            <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;">
                <thead>
                    <tr>
                        <!-- <th><input type="checkbox" v-model="allChecked" style="width: 30px;" /></th> -->
                        <th style="height: 40px;">序号</th>
                        <th>产品名称</th>
                        <th>产品编号</th>
                        <th>规格型号</th>
                        <th>单位</th>
                        <th>订单数量</th>
                        <th>本次派工数量</th>
                        <th>计划开工日期</th>
                        <th>计划完工日期</th>
                        <th>交货日期</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in dispatchProduction" :key="index">
                        <!-- <td><input type="checkbox" 
                                style="width: 30px;width: 100%;" /></td>-->
                        <td style=" text-align: center;">{{ index + 1 }}</td>
                        <td>
                            <el-input v-model="item.pName" @dblclick="ProClick" placeholder="双击选择产品名称">
                            </el-input>
                        </td>
                        <td>
                            <el-input v-model="item.pNumber" style="width: 100%" disabled />
                        </td>
                        <td>
                            <el-input v-model="item.pSpec" style="width: 100%" disabled />
                        </td>
                        <td>
                            <el-input v-model="item.pUnit" style="width: 100%" disabled />
                        </td>

                        <td>
                            <el-input-number v-model="item.orderNum" :min="0" controls-position="right" size="large"
                                :precision="2" :step="0.01" />
                        </td>

                        <td>
                            <el-input-number v-model="item.dThisNum" :min="0" controls-position="right" size="large"
                                :precision="2" :step="0.01" />
                        </td>
                        <td>
                            <el-date-picker v-model="item.dpStartDate" type="date" format="YYYY/MM/DD"
                                style="width: 100%" />
                        </td>
                        <td>
                            <el-date-picker v-model="item.dpEndDate" type="date" format="YYYY/MM/DD"
                                style="width: 100%" />
                        </td>
                        <td>
                            <el-date-picker v-model="item.dDeliveryDate" type="date" format="YYYY/MM/DD"
                                style="width: 100%" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 所需物料 -->
        <div style="margin-top: 30px;width: 100%;">
            <span>所需物料
                <el-button size="small" @click="AddRowMaterial">增行</el-button>
            </span>
            <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;">
                <thead>
                    <tr>
                        <!-- <th><input type="checkbox" v-model="allChecked3" style="width: 30px;" /></th> -->
                        <th style="height: 40px;">序号</th>
                        <th>物料名称</th>
                        <th>物料编号</th>
                        <th>规格型号</th>
                        <th>单位</th>
                        <th>产品比例</th>
                        <th>耗损率(%)</th>
                        <th>所需数量</th>
                        <th>到货日期</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in DispatchMateria" :key="index">
                        <!-- <td><input type="checkbox" 
                                style="width: 30px;width: 100%;" /></td> -->
                        <td style=" text-align: center;">{{ index + 1 }}</td>
                        <td>
                            <el-input v-model="item.mSubject" @dblclick="MaterialClick" placeholder="双击选择物料名称" />
                        </td>
                        <td>
                            <el-input v-model="item.mNumber" style="width: 100%" disabled />
                        </td>
                        <td>
                            <el-input v-model="item.mpSpec" style="width: 100%" disabled />
                        </td>
                        <td>
                            <el-input v-model="item.mpUnit" style="width: 100%" disabled />
                        </td>
                        <td>
                            <el-input-number v-model="item.pRatio" :min="1" controls-position="right" size="large" />
                        </td>
                        <td>
                            <el-input v-model="item.pStock" style="width: 100%" />
                        </td>
                        <td>
                            <el-input-number v-model="item.needNum" :min="1" controls-position="right" size="large" />
                        </td>
                        <td>
                            <el-date-picker v-model="item.arrivalDate" type="date" format="YYYY/MM/DD"
                                style="width: 100%" />
                        </td>
                        <td>
                            <el-input v-model="item.remark" style="width: 100%" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 附件 -->
        <div style="margin-top: 30px">
            <table border="1" style="width: 100%;height: 100%; border-collapse: collapse;">
                <tr style="height: 50px;">
                    <td colspan="8">附件</td>
                </tr>
                <tr style="height: 80px;">

                </tr>
            </table>
        </div>
        <div>
            <button @click="add">添加</button>
        </div>
    </el-card>
    <!--父  选择产品 -->
    <el-dialog v-model="dialogProductTypeSelect" title="选择产品" width="700" :before-close="ProductTypeSelectOver">
        <template #footer>
            <div class="dialog-footer">
                <el-table :data="PPtableData" border style="width: 100%" highlight-current-row
                    @current-change="handleSelectionChange">
                    <el-table-column prop="productId" label="序号" width="100" align="center" />
                    <el-table-column prop="pNumber" label="产品编号" align="center" width="140" />
                    <el-table-column prop="pName" label="物品名称" align="center" />
                </el-table>
                <br>
                <el-button type="success" @click="dialogProductTypeSelect = false">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogProductTypeSelect1" title="选择物料" width="700" :before-close="ProductTypeSelectOver">
        <template #footer>
            <el-table :data="PtableData" style="width:1000px" highlight-current-row
                @current-change="handleSelectionChange1">
                <!-- <el-table-column type="selection" width="55" /> -->
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="mSubject" label="物料清单主题" width="180" />
                <el-table-column prop="materialNode" label="物料清单编码" width="180" />
                <el-table-column prop="pName" label="产品名称" />
                <el-table-column prop="mpSpec" label="规格型号" />
            </el-table>
            <br>
            <el-button type="success" @click="dialogProductTypeSelect1 = false">确认</el-button>
        </template>
    </el-dialog>

    <!-- 派工人员弹框 -->
    <el-dialog v-model="dialogVisible1" title="库管选择" width="1000" style="height: 700px;color:black">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps" default-expand-all="true"
                        @node-click="handleNodeClick2" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="manpowerList" style="width:100%" @selection-change="handleSelectionChange2">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="mName" label="姓名" align="center" />
                        <el-table-column prop="sectorName" label="部门" align="center" />
                        <el-table-column prop="postName" label="岗位" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible1 = false">
                保存
            </el-button>
        </template>
    </el-dialog>



    <!-- 产品名称弹框 -->
    <el-dialog v-model="dialogVisible" title="产品名称选择" width="1000" style="height: 700px;">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="VendorType" :props="defaultProps"
                        default-expand-all="true" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="productlist" border style="width: 100%" @selection-change="hand">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="pName" label="产品名称" align="center" />
                        <el-table-column prop="pNumber" label="产品编号" align="center" />
                        <el-table-column prop="pUnit" label="规格型号" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible = false">
                保存
            </el-button>
        </template>
    </el-dialog>

    <!--物料清单弹框-->
    <el-dialog v-model="dialogVisible2" title="物料清单" width="1200" align-center>
        <div style="float:left;">
            <el-button type="primary" @click="dialogVisible2 = false">
                确认
            </el-button>

        </div>
        <div style="float: left;margin-left: 20px;width: 100%;margin-top: 50px;">
            <el-table :data="tableData" style="width:100%" @selection-change="hands">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="mSubject" label="物料清单主题" width="180" />
                <el-table-column prop="materialNode" label="物料清单编码" width="180" />
                <el-table-column prop="pName" label="产品名称" />
                <el-table-column prop="mpSpec" label="规格型号" />
            </el-table>
        </div>

    </el-dialog>



</template>

<script setup lang="ts">
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import http from '../../../http.js'


const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const dialogVisible2 = ref(false)

const form = reactive({
    "dispatchId": 0,
    "dNumber": "",
    "disTopic": "",
    "dPickState": 1,
    "mSubject": "",
    "dMaterState": 1,
    "dState": 0,
    "warehouseStorageId": 0,
    "manpowerId": 0,
    "manpowerName": "",
    "productId": 0,
    "dAlreadyNum": 0,
    "dThisNum": 0,
    "addName": localStorage.getItem("UserName"),
    "addTime": '',
    "office_Id": "",
    "user_Id": 0,
    "dispatchProd": "",
    "dispatchProduct": [
        {
            "productId": 0,
            "pName": "",
            "pNumber": "",
            "pSpec": "",
            "pUnit": "",
            "orderNum": 0,
            "dThisNum": 0,
            "dpStartDate": "",
            "dpEndDate": "",
            "dDeliveryDate": ""
        }
    ],
    "disMaterial": [
        {


            "materialId": 0,
            "mSubject": "",
            "warehouseStorageId": 0,
            "mpNumber": "",
            "mpName": "",
            "mpSpec": "",
            "mpUnit": "",
            "pRatio": 0,
            "pStock": 0,
            "needNum": 0,
            "arrivalDate": "",
            "remark": ""
        }
    ]

})


//#region 

//#region  派工人员

const openDialog = () => {
    dialogVisible1.value = true
    GetSectorList()
    GetManpowerList()
}

//查询条件
const wform = reactive({
    MName: "",
    Mstart: "",
    Mend: "",
    Bstart: "",
    Bend: "",
    SectorId: "",
    PostId: ""
})

//分页
const wPage = reactive({
    Pindex: 1,
    Psize: 10,
    pcount: 0,
    lcount: 0
})

//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
            console.log(sectorlist.value)
        })
}

//树形
const handleNodeClick2 = (data: Tree) => {
    console.log(data)
    wform.SectorId = data.value

}

//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: wPage.Pindex,
            Psize: wPage.Psize,
            MName: wform.MName || "",
            Mstart: wform.Mstart || "",
            Mend: wform.Mend || "",
            Bstart: wform.Bstart || "",
            Bend: wform.Bend || "",
            SectorId: wform.SectorId || "",
            PostId: wform.PostId || "",
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
            wPage.lcount = res.data.data.lcount;
            wPage.pcount = res.data.data.pcount;
            console.log(res.data.data)
        })
}


// 派工人多选框
const check2 = ref([])
const handleSelectionChange2 = (val: any) => {
    console.log(val)
    check2.value = val
    form.manpowerId = val[0].manpowerId
    form.manpowerName = val[0].mName

}
//物料
const check3 = ref([])
const handleSelectionChange3 = (val: any) => {
    console.log(val)
    check3.value = val


}
//#endregion

//#region  产品名称弹框


const ProClick = () => {
    dialogVisible.value = true
    getVendorType()
    ProductList()
}
//显示供应商中的供应商类别树形
var VendorType = ref([]);
const getVendorType = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelect').then(res => {
        if (res.data.code == 0) {
            VendorType.value = res.data.data
        }
        console.log(VendorType.value)
    })
}

const productPage = reactive({
    pindex: 1,
    psize: 100,
    pageLast: 0,
    sumCount: 0,
    PName: "",
    PNumber: "",
})
//显示产品列表
const productlist = ref([])
const ProductList = () => {
    axios.get(http.zblnb + '/cg/api/ProcurementReturn/GetProductList', {
        params: {
            pindex: productPage.pindex,
            psize: productPage.psize,
            PName: productPage.PName || "",
            PNumber: productPage.PNumber || "",
            ProductTypeId: 0
        }
    })
        .then(res => {
            productlist.value = res.data.data.list
            productPage.sumCount = res.data.data.sumCount;
            productPage.pageLast = res.data.data.pageLast
            console.log(res.data)
        })
}

//选中的产品名称 父
const handleSelectionChange = (val: any) => {
    console.log(val)
    form.dispatchProd = val.pName
    form.productId = val.productId
}

//#endregion


//#region  物料清单

const MaterialClick = () => {
    dialogVisible2.value = true
    Show()
}

const formInline = reactive({
    pageIndex: 1,
    pageSize: 20,
})
const tableData = ref([])

const Show = () => {
    console.log(formInline)
    axios.get(http.zblnb + '/sc/api/Material/MaterialShow', {
        params: {
            pageIndex: formInline.pageIndex,
            pageSize: formInline.pageSize,
            Office_Id: 1
        }

    }).then(res => {
        console.log(res.data.data.list)
        tableData.value = res.data.data.list
    })

}

const PtableData = ref([])

const PShow = () => {
    console.log(formInline)
    axios.get(http.zblnb + '/sc/api/Material/MaterialShow', {
        params: {
            pageIndex: formInline.pageIndex,
            pageSize: formInline.pageSize,
            Office_Id: 1
        }

    }).then(res => {
        console.log(res.data.data.list)
        PtableData.value = res.data.data.list
    })

}

const PPtableData = ref([])

const PPShow = () => {
    console.log(formInline)
    axios.get(http.zblnb + '/sc/api/Material/MaterialShow', {
        params: {
            pageIndex: formInline.pageIndex,
            pageSize: formInline.pageSize,
            Office_Id: 1
        }

    }).then(res => {
        console.log(res.data.data.list)
        PPtableData.value = res.data.data.list
    })

}

//多选框赋值  父 物料
const handleSelectionChange1 = (val: any) => {
    console.log(val)
    form.manpowerId = val.materialId
    form.mSubject = val.mSubject


}
//#endregion


//#region  派工产品


const dispatchProduction = ref([])
const hand = (val: any) => {
    dispatchProduction.value = val;
    console.log(dispatchProduction.value);
};
const AddRowProduct = () => {
    dispatchProduction.value.push({
        "dispatchProductId": '',
        "dNumber": "",
        "productId": '',
        "pName": "",
        "pNumber": "",
        "pSpec": "",
        "pUnit": "",
        "orderNum": '',
        "dThisNum": '',
        "dpStartDate": "",
        "dpEndDate": "",
        "dDeliveryDate": "",
        "addName": "",
        "addTime": "",
        "updName": "",
        "updTime": "",
        "delName": "",
        "delTime": "",
        "office_Id": "",
        "user_Id": ''
    })
}



//#endregion



//#region  物料
const DispatchMateria = ref([])
const hands = (val: any) => {
    DispatchMateria.value = val;
    console.log(DispatchMateria.value);
};
const AddRowMaterial = () => {
    DispatchMateria.value.push({
        "disMaterialId": 0,
        "dNumber": "",
        "materialId": 0,
        "mSubject": "",
        "warehouseStorageId": '',
        "mpNumber": "",
        "mpName": "",
        "mpSpec": "",
        "mpUnit": "",
        "pRatio": '',
        "pStock": '',
        "needNum": '',
        "arrivalDate": "",
        "remark": ""
    })
}


//#endregion


const forms = reactive({
    SectorId: "",
})

const handleNodeClick = (data: Tree) => {
    console.log(data)
    forms.SectorId = data.value

    GetManpowerList();
}

//显示人员档案
const manpowerLists = ref([])
const GetManpowerLists = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: 1,
            Psize: 20,
            SectorId: forms.SectorId || "",
        }
    })
        .then(res => {
            manpowerLists.value = res.data.data.list

        })
}
//#endregion
onMounted(() => {
    Show()
    PPShow();
    GetManpowerLists();
    PShow();
})

var a = new Date()
// 格式化为 YYYY-MM-DD  
const year = a.getFullYear();
const month = String(a.getMonth() + 1).padStart(2, '0'); // 月份从0开始  
const day = String(a.getDate()).padStart(2, '0');
form.addTime = `${year}-${month}-${day}`
const dialogProductTypeSelect = ref(false)
const dialogProductTypeSelect1 = ref(false)
//#region 
//获取产品列表
const tableDatas = ref([])
const GetProduct = () => {
    axios.get(http.zblnb + '/erpcp/api/Product/ProductShow', {
        params: {
            PageIndex: 1,
            PageSize: 100,
            PName: '',
            PNumber: '',
            Office_Id: '',
            ProductTypeId: 0
        }
    })
        .then(res => {
            tableDatas.value = res.data.data.list
        })
        .catch(err => {
            console.log(err)
        })
}
//多选框赋值
const Duo = ref([])
const handleSelectionChanges = (val: any) => {
    Duo.value = val
}
//关闭弹出层反填
const ProductSelectOk = () => {
    form.dispatchProd = Duo.value[0].pName
    dialogProductTypeSelect.value = false
}
//#endregion


const add = () => {
    form.dispatchProduct = [];
    form.disMaterial = [];
    dispatchProduction.value.forEach(item => {
        console.log(item);
        const newItem = {
            "productId": item.productId,
            "pName": item.pName,
            "pNumber": item.pNumber,
            "pSpec": item.pSpec,
            "pUnit": item.pUnit,
            "orderNum": item.orderNum,
            "dThisNum": item.dThisNum,
            "dpStartDate": item.dpStartDate,
            "dpEndDate": item.dpEndDate,
            "dDeliveryDate": item.dDeliveryDate,

        };

        console.log(newItem); // 调试步骤 
        if (newItem.productId != 0) {
            form.dispatchProduct.push(newItem);
        }

    });
    DispatchMateria.value.forEach(item => {
        console.log(item);
        const newItem = {
            "materialId": item.materialId,
            "mSubject": item.mSubject,
            "warehouseStorageId": item.warehouseStorageId,
            "mpNumber": item.mNumber,
            "mpName": item.mpName,
            "mpSpec": item.mpSpec,
            "mpUnit": item.mpUnit,
            "pRatio": item.pRatio,
            "pStock": item.pStock,
            "needNum": item.needNum,
            "arrivalDate": item.arrivalDate,
            "remark": item.remark
        };

        console.log(newItem); // 调试步骤 
        if (newItem.mpNumber != '') {
            form.disMaterial.push(newItem)
        }

    });
    axios.post(http.zblnb + '/sc/api/DisPatch/AddDisPatch', form).then(function (res) {
        console.log(res.data);
        if (res.data.data == 1) {
            ElMessage({
                message: '添加成功',
                type: 'success',
            })
            router.push('/DisPatchShow')
        }
        else {
            ElMessage.error('添加失败');
        }
    }
    ).catch(function (error) {
        console.log(error);
    });
}

</script>